<template>
	<div class="citys" ref="wrapper">
		<div>
			<div v-for="(item,key) of list" :key="key" :ref="key">
				<div class="keyCity">{{key}}</div>
				<city-list :list="item"></city-list>
			</div>
		</div>
	</div>
</template>

<script>
	import cityList from './List.vue'
	import Bscroll from 'better-scroll'

	export default{
		name:'listCity',
		props:{
			list:Object,
			letter:String
		},
		watch:{
			letter(){
				if (this.letter) {
					const element = this.$refs[this.letter][0];
					console.log(this.scroll);
        			this.scroll.scrollToElement(element);
				}
			}
		},
		mounted () {
		    this.scroll = new Bscroll(this.$refs.wrapper)
		},
		components:{
			cityList
		},
	}
</script>

<style lang="stylus" scoped>
.citys
	position:absolute
	overflow:hidden
	left:0
	right:0
	bottom:0
	// top:9.2rem
	top:4.2rem
	.keyCity
		font-size:0.24rem
		padding:0.3rem
</style>